<template>
	<view>
		<view class="headers">
			<view class="tab" :style="{height:navHeight+'px','padding-top':statusHeight+'px'}">
				<text>编辑</text>
				<view class="name">购物车</view>
			</view>
		</view>
		<view class="contain" :style="{'padding-top':statusHeight+navHeight+'px'}"> 
		<block v-if="list&&list.length>0">
			<view class="shopList">
				<view class="item">
					<image class="t1" src="https://www.atuanjian.com/appletStatic/static/st0.png" mode="aspectFit"></image>
					<image class="t2" src="https://www.atuanjian.com/appletStatic/static/t1.png" mode="aspectFill"></image>
					<view class="info">
						<view class="name">【赋能之旅】油画大师主...【赋能之旅】油画大师主...</view>
						<view class="des">团队合作、提升凝聚力</view>
						<view class="jie">
							<view class="price">￥<text>0</text></view>
							<view class="jia">
								<image src="https://www.atuanjian.com/appletStatic/static/jian.png" mode="aspectFit"></image>
								<text>1</text>
								<image src="https://www.atuanjian.com/appletStatic/static/jia.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
	   <block v-else> 
		<view class="header">
			<view class="content">
				<view class="emptyCar">
					<image src="https://www.atuanjian.com/appletStatic/static/shopCar/empty.png" mode="aspectFit"></image>
					<text>购物车是空的</text>
				</view>
				<view class="btn">
					<view class="next">逛逛秒杀</view>
					<view class="next">看看收藏</view>
				</view>
			</view>
		</view>
		<view class="wrap1">
			<view class="titImg">
				<image src="https://www.atuanjian.com/appletStatic/static/shopCar/t2.png" mode="aspectFill"></image>
			</view>
			<view class="card">
				<image class="bg" src="https://www.atuanjian.com/appletStatic/static/shopCar/card.png" mode="aspectFill"></image>
				<view class="info">
					<view class="left">
						<view class="money">￥<text>60</text></view>
						<view class="des">满1000元可用</view>
					</view>
					<view class="right">
						<view class="top">
							<view class="dis">
								<view class="title">团建专享券</view>
								<view class="time">2021.12.23-2021.12.25</view>
							</view>
							<view class="btn">去使用</view>
						</view>
						<view class="bottom">全平台使用</view>
					</view>
				</view>
			</view>
			<view class="notice">优惠券可用商品</view>
			<scroll-view scroll-x="true" class="scroll1">
				<view class="wrapper">
					<view class="item" v-for="(item,index) in 5" :key="index">
						<image class="img" src="https://www.atuanjian.com/appletStatic/static/shopCar/banner1.png" mode="aspectFit"></image>
						<view class="info">
							<view class="name">【旋转风暴】极限飞盘主题团建</view>
							<view class="notic">
								<text>1天0晚</text>
								<u-line direction="col" length="16rpx" color="#888888" margin="0 12rpx 0 12rpx"></u-line>
								<text>30~100人</text>
							</view>
							<view class="price">
								<!-- <view class="money">
									<text>300</text>元起
								</view> -->
								<image class="shop" src="https://www.atuanjian.com/appletStatic/static/shopCar/car.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="wrap2">
			<view class="titImg">
				<image src="https://www.atuanjian.com/appletStatic/static/shopCar/t1.png" mode="aspectFill"></image>
			</view> 
			<view class="wrapper">
				<view class="item" v-for="(item,index) in 2" :key="index">
					<image class="img" src="https://www.atuanjian.com/appletStatic/static/shopCar/banner1.png" mode="aspectFit"></image>
					<view class="info">
						<view class="name">【旋转风暴】极限飞盘主题团建</view>
						<view class="notic">
							<text>1天0晚</text>
							<u-line direction="col" length="16rpx" color="#888888" margin="0 12rpx 0 12rpx"></u-line>
							<text>30~100人</text>
						</view>
						<view class="price">
							<!-- <view class="money">
								<text>300</text>元起
							</view> -->
							<view class="buy">去抢购</view>
						</view>
					</view>
				</view>
			</view> 
		</view>
	   </block>
	   </view>
		<view class="select" :style="{bottom:callPhone?'98rpx':'116rpx'}">
			<view class="left">
				<image src="https://www.atuanjian.com/appletStatic/static/st0.png" mode="aspectFit"></image>
				<text>全选</text>
			</view>
			<view class="right">
				<view class="moneys">
					<view class="cont">合计<text class="i1">￥</text><text class="i2">139</text></view>
					<view class="des" v-if="callPhone">已优惠<text>￥</text>13</view>
				</view>
				<view class="del">{{callPhone?`结算（${navHeight}）`:'删除'}}</view>
			</view>
		</view>
		<!-- tabBar -->
		<tabBar current='3' :callPhone="callPhone"></tabBar>
	</view>
</template>

<script>
	import tabBar from '@/components/tabBar.vue'
	import {statusHeight, navHeight} from "@/utils/common.js"
	export default {
		data() {
			return {
				statusHeight:0,
				navHeight:0,
				callPhone:false,
				list:[]
			}
		},
		components:{tabBar},
		methods: {
			
		},
		onLoad() {
			this.statusHeight=statusHeight
			this.navHeight=navHeight
		},
		onShareAppMessage() {
			
		} 
	}
</script>

<style lang="scss" scoped>
page{
	background-color: #F5F5F5;
}
.headers{
	width: 750rpx;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	background-color: #FFB850;
	.tab{
		padding-left: 30rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		text{
			font-size: 28rpx;
			font-family: 苹方-简;
			font-weight: normal;
			line-height: 38rpx;
			color: #FFFFFF;
			margin-right: 250rpx;
		}
		.name{
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold; 
			color: #FFFFFF;
		}
	}
}
.header{
	background-color: #FFFFFF;
	padding: 46rpx 125rpx 40rpx;
	margin-bottom: 24rpx;
	.content{
		.emptyCar{
			@include flex_style(center,center,row nowrap);
			margin-bottom: 36rpx;
			image{
				width: 80rpx;
				height: 80rpx;
				margin-right: 18rpx;
			}
			text{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #888888;
			}
		}
		.btn{
			@include flex_style(space-between,center,row nowrap);
			.next{
				width: 220rpx;
				height: 72rpx;
				background: rgba(255, 255, 255, 0.39);
				border: 2rpx solid #D5D5D5;
				border-radius: 36rpx;
				text-align: center;
				line-height: 72rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400; 
				color: #333333;
			}
		}
	}
}
.wrap1{
	padding: 32rpx 0 30rpx 30rpx;
	background-color: #FFFFFF;
	.titImg{
		width: 467rpx;
		height: 48rpx;
		margin-left: 112rpx;
		margin-bottom: 32rpx;
		image{
			width: 100%;
			height: 100%;
			display: block;
		}
	}
	.card{
		position: relative;
		padding-right: 32rpx;
		margin-bottom: 32rpx;
		.bg{
			width: 690rpx;
			height: 206rpx;
		}
		.info{
			width: 690rpx;
			height: 206rpx;
			box-sizing: border-box;
			padding-right: 32rpx;
			position: absolute;
			top: 0;
			left: 0;
			@include flex_style(space-between,flex-start,row nowrap);
			.left{
				padding: 36rpx 0 36rpx 30rpx;
				.money{
					@include flex_style(flex-start,flex-end,row nowrap);
					font-size: 28rpx;
					font-family: DIN;
					font-weight: 500;
					line-height: 34rpx;
					color: #FFFFFF;
					margin-bottom: 8rpx;
					text{
						font-size: 80rpx;
						font-family: DIN;
						font-weight: bold;
						line-height: 96rpx;
						color: #FFFFFF;
					}
				}
				.des{
					text-align: center;
					font-size: 22rpx;
					font-family: 苹方-简;
					font-weight: normal;
					line-height: 30rpx;
					color: #FFFFFF;
				}
			}
			.right{
				width: 420rpx;
				.top{
					padding-top: 32rpx;
					padding-bottom: 18rpx;
					margin-bottom: 18rpx;
					border-bottom: 2rpx solid #F8F8F8;
					@include flex_style(space-between,center,row nowrap);
					.dis{
						.title{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							line-height: 40rpx;
							color: #333333;
							margin-bottom: 16rpx;
						}
						.time{
							font-size: 22rpx;
							font-family: 苹方-简;
							font-weight: normal;
							line-height: 30rpx;
							color: #666666;
						}
					}
					.btn{
						width: 132rpx;
						height: 56rpx;
						border: 2rpx solid #FFB850; 
						border-radius: 28rpx;
						text-align: center;
						line-height: 56rpx;
						font-size: 24rpx;
						font-family: 苹方-简;
						font-weight: normal; 
						color: #FFB850;
					}
				}
				.bottom{
					font-size: 22rpx;
					font-family: 苹方-简;
					font-weight: normal;
					line-height: 30rpx;
					color: #666666;
				}
			}
		}
	}
	.notice{
		font-size: 22rpx;
		font-family: 苹方-简;
		font-weight: normal;
		line-height: 30rpx;
		color: #888888;
		margin-bottom: 28rpx;
	}
	.scroll1{
		height: 330rpx;
		.wrapper{
			@include flex_style(flex-start,center,row nowrap);
			white-space: nowrap;
			padding-left: 5rpx; 
			.item{
				background: rgba(255, 255, 255, 0.39);
				box-shadow: 0px 6rpx 20rpx rgba(155, 155, 155, 0.24); 
				border-radius: 8rpx;
				margin-right: 22rpx;
				.img{
					width: 256rpx;
					height: 156rpx;
					margin-bottom: 5rpx;
				}
				.info{
					padding: 10rpx 16rpx 12rpx;
					.name{
						width: 224rpx;
						height: 62rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 31rpx;
						color: #1A1A1A;
						white-space: normal;
						@include word_over(2);
						margin-bottom: 8rpx;
					}
					.notic{
						@include flex_style(flex-start,center,row nowrap);
						margin-bottom: 12rpx;
						text{
							font-size: 20rpx;
							font-family: 苹方-简;
							font-weight: normal;
							line-height: 28rpx;
							color: #888888;
						}
					}
					.price{
						@include flex_style(space-between,center,row nowrap);
						.money{
							font-size: 16rpx;
							font-family: 苹方-简;
							font-weight: normal;
							line-height: 22rpx;
							color: #888888;
							text{
								font-size: 22rpx;
								font-family: 苹方-简;
								font-weight: normal;
								line-height: 32rpx;
								color: #FF5E00;
							}
						}
						.shop{
							width: 25rpx;
							height: 23rpx;
						}
					}
				}
			}
		}
	}
	
}
.wrap2{
		margin-top: 24rpx;
		padding:32rpx 30rpx 110rpx; //40
		background-color: #FFFFFF;
		.titImg{ 
			width: 298rpx;
			height: 48rpx;
			 margin:0 auto 52rpx;
			 image{
				 width:298rpx;
				 height:48rpx;
			 }
		}
		.wrapper{
			@include flex_style(flex-start,center,row wrap);
			white-space: nowrap;
			padding-left: 5rpx; 
			.item{
				background: rgba(255, 255, 255, 0.39);
				box-shadow: 0px 6rpx 20rpx rgba(155, 155, 155, 0.24); 
				border-radius: 8rpx;
				margin-right: 22rpx;
				margin-bottom: 40rpx;
				.img{
					width: 332rpx;
					height: 202rpx;
					margin-bottom: 6rpx;
				}
				.info{
					padding: 10rpx 16rpx 12rpx;
					.name{
						width: 300rpx;
						height: 72rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 31rpx;
						color: #1A1A1A;
						white-space: normal;
						@include word_over(2);
						margin-bottom: 8rpx;
					}
					.notic{
						@include flex_style(flex-start,center,row nowrap);
						margin-bottom: 12rpx;
						text{
							font-size: 20rpx;
							font-family: 苹方-简;
							font-weight: normal;
							line-height: 28rpx;
							color: #888888;
						}
					}
					.price{
						@include flex_style(space-between,center,row nowrap);
						.money{
							font-size: 16rpx;
							font-family: 苹方-简;
							font-weight: normal;
							line-height: 22rpx;
							color: #888888;
							text{
								font-size: 22rpx;
								font-family: 苹方-简;
								font-weight: normal;
								line-height: 32rpx;
								color: #FF5E00;
							}
						}
						.buy{
							width: 120rpx;
							height: 48rpx;
							line-height: 48rpx;
							border-radius: 24rpx;
							text-align: center; 
							background: linear-gradient(180deg, #FFB850 0%, #FF8000 100%);
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400; 
							color: #FFFFFF;
						}
					}
				}
			}
			.item:nth-child(2n){
				margin-right: 0;
			}
		}
	}
.select{
		opacity: 0;
		border-top: 1px solid #ECECEC;
		width: 750rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;//58   49
		z-index: 10;
		background-color: #FFFFFF;
		padding: 10rpx 26rpx 14rpx 24rpx;
		@include flex_style(space-between,center,row wrap);
		
		.left{
			@include flex_style(flex-start,center,row wrap);
			image{
				width: 32rpx;
				height: 32rpx;
				margin-right: 24rpx;
			}
			text{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #000000;
			}
		}
		.right{
			@include flex_style(flex-start,center,row wrap);
			.moneys{
				.cont{
					font-size: 24rpx;
					font-family: 苹方-简;
					font-weight: normal;
					line-height: 32rpx;
					color: #1A1A1A;
					.i1{
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: bold;
						line-height: 28rpx;
						color: #FF6F00;
					}
					.i2{
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						line-height: 44rpx;
						color: #FF6F00;
					}
				}
				.des{
					text-align: right;
					font-size: 20rpx;
					font-family: 苹方-简;
					font-weight: normal;
					line-height: 28rpx;
					color: #FF6F00;
					text{
						font-size: 14rpx;
						font-family: PingFang SC;
						font-weight: bold;
						line-height: 18rpx;
						color: #FF6F00;
					}
				}
			}
			// text{
			// 	font-size: 28rpx;
			// 	font-family: PingFang SC;
			// 	font-weight: 400;
			// 	line-height: 40rpx;
			// 	color: #000000;
			// }
			.del{
				margin-left: 30rpx;
				width: 190rpx;
				height: 72rpx;
				background: linear-gradient(98deg, #FFB850 0%, #FF8000 100%);
				text-align: center;
				line-height: 72rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400; 
				color: #FFFFFF;
				border-radius: 36rpx;
			}
		}
}
.shopList{
	padding: 24rpx;
	.item{
		width: 702rpx;
		height: 264rpx;
		border-radius: 20rpx;
		box-sizing: border-box;	
		background: #FFFFFF;
		padding: 24rpx;
		@include flex_style(space-between,center,row nowrap);
		.t1{
			width: 32rpx;
			height: 32rpx;
		}
		.t2{
			width: 216rpx;
			height: 216rpx;
		}
		.info{
			.name{
				width: 330rpx;
				height: 40rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #1A1A1A;
				margin-bottom: 16rpx;
			}
			.des{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #999999;
				margin-bottom: 70rpx;
			}
			.jie{
				@include flex_style(space-between,center,row nowrap);
				.price{
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 28rpx;
					color: #FF6F00;
					text{
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						line-height: 44rpx;
						color: #FF6F00;
					}
				}
				.jia{
					width: 192rpx;
					height: 56rpx;
					box-sizing: border-box;
					padding: 0 16rpx;
					background: rgba(255, 255, 255, 0.39);
					border: 1px solid #ECECEC; 
					border-radius: 28rpx;
					@include flex_style(space-between,center,row nowrap);
					image{
						width: 22rpx;
						height: 22rpx;
					}
					text{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						line-height: 40rpx;
						color: #1A1A1A;
					}
				}
			}
		}
	}
}
</style>
